<template>  
    <ul>  
      <todo-item  
        v-for="todo in todos"  
        :key="todo.id"  
        :todo="todo"  
        @delete="removeTodo"  
      ></todo-item>  
    </ul>  
  </template>  
    
  <script>  
  import TodoItem from './TodoItem.vue';  
    
  export default {  
    components: {  
      TodoItem  
    },  
    props: ['todos'],  
    methods: {  
      removeTodo(id) {  
        this.$emit('update', this.todos.filter(todo => todo.id !== id));  
      }  
    }  
  };  
  </script>